<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/static/admin/css/font.css">
        <link rel="stylesheet" href="/static/admin/css/xadmin.css">
        <script type="text/javascript" src="/static/admin/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/static/admin/js/xadmin.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <style>
        .img_delete {
            position:relative;top: -108px;right:-93px;
            width:14px;
        }
        .img img {
            width:100px;
            height:100px;
        }
    </style>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                    <input type="hidden" value="{$r_id}" name="r_id" />
                    <div class="layui-form-item">
                        <label for="room_num" class="layui-form-label">
                            <span class="x-red">*</span>房间号
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="room_num" value="{$room.room_num}" lay-verify="required" readonly name="room_num"  autocomplete="off" class="layui-input">
                        </div>

                        <label for="door_lock" class="layui-form-label">
                            <span class="x-red">*</span>门锁
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="door_lock" value="{$room.door_lock}" name="door_lock" lay-verify="required"  autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="elec_meter" class="layui-form-label">
                            <span class="x-red">*</span>电表号
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="elec_meter" value="{$room.elec_meter}" name="elec_meter" lay-verify="required"  autocomplete="off" class="layui-input">
                        </div>

                        <label for="status" class="layui-form-label">
                            <span class="x-red">*</span>房间出租状态
                        </label>
                        <div class="layui-input-inline">
                            <select name="status" id="status" lay-filter="status">
                                <option {if $room.status==1}selected{/if} value="1">未出租</option>
                                <option {if $room.status==2}selected{/if} value="2">已出租</option>
                                <option {if $room.status==3}selected{/if} value="3">已预定</option>
                            </select>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label for="price" class="layui-form-label">
                            <span class="x-red">*</span>价格
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="price" value="{$room.price}" name="price" lay-verify="required"  autocomplete="off" class="layui-input">
                        </div>

                        <label for="floor_space" class="layui-form-label">
                            <span class="x-red">*</span>面积
                        </label>
                        <div class="layui-input-inline">
                            <div class="layui-input-inline">
                                <input type="text" id="floor_space" value="{$room.floor_space}" name="floor_space" lay-verify="required"  autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="orientation" class="layui-form-label">
                            <span class="x-red">*</span>朝向
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="orientation" value="{$room.orientation}" name="orientation" lay-verify="required"  autocomplete="off" class="layui-input">
                        </div>

                        <label for="style" class="layui-form-label">
                            <span class="x-red">*</span>装修风格
                        </label>
                        <div class="layui-input-inline">
                            <div class="layui-input-inline">
                                <select name="style" id="style"  lay-filter="status">
                                    <option {if $room.style==1}selected{/if} value="1">精装</option>
                                    <option {if $room.style==2}selected{/if} value="2">简装</option>
                                    <option {if $room.style==3}selected{/if} value="3">毛坯</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="synopsis" class="layui-form-label">
                            <span class="x-red">*</span>简介
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="synopsis" value="{$room.synopsis}" name="synopsis" lay-verify="required"  autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">房间物品</label>
                        <div class="layui-input-block">
                            <input type="checkbox" lay-filter="goods" {if $room.window==2}checked value="2"{/if} name="window" title="窗户">
                            <input type="checkbox" lay-filter="goods" {if $room.bay_window==2}checked  value="2"{/if} name="bay_window" title="飘窗">
                            <input type="checkbox" lay-filter="goods" {if $room.balcony==2}checked  value="2"{/if} name="balcony" title="阳台">
                            <input type="checkbox" lay-filter="goods" {if $room.air_conditioner==2}checked  value="2"{/if} name="air_conditioner" title="空调">
                            <input type="checkbox" lay-filter="goods" {if $room.wardrobe==2}checked  value="2"{/if} name="wardrobe" title="衣柜">
                            <input type="checkbox" lay-filter="goods" {if $room.bed==2}checked  value="2"{/if} name="bed" title="床">
                            <input type="checkbox" lay-filter="goods" {if $room.mattress==2}checked  value="2"{/if} name="mattress" title="床垫">
                            <input type="checkbox" lay-filter="goods" {if $room.desk==2}checked  value="2"{/if} name="desk" title="书桌">
                            <input type="checkbox" lay-filter="goods" {if $room.intelligent_door_lock==2}checked  value="2"{/if} name="intelligent_door_lock" title="智能门锁">
                            <input type="checkbox" lay-filter="goods" {if $room.independent_toilet==2}checked  value="2"{/if} name="independent_toilet" title="独卫">
                            <input type="checkbox" lay-filter="goods" {if $room.near_metro==2}checked  value="2"{/if} name="near_metro" title="近地铁">
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>房间图片
                        </label>

                        <div class="layui-input-inline" style="margin-top:5px;">
                            <button type="button" class="layui-btn" id="photo_url_button">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                    </div>

                    <div class="layui-form-item photo_url_arr">
                        <label class="layui-form-label">
                            <span class="x-red"></span>
                        </label>
                        <input type="hidden" value="{$room.photo_url}" id="photo_url" name="photo_url" value=""/>
                        {notempty name="photo_url"}
                        {volist name="photo_url" id="info"}
                        <div class="layui-input-inline img">
                            <img src="{$info}">
                            <div class="img_delete">
                                <a title="删除" onclick="member_del(this)" href="javascript:;">
                                <i class="layui-icon">&#x1006;</i>
                                </a>
                            </div>
                        </div>
                        {/volist}
                        {/notempty}
                    </div>

                    <div class="layui-form-item">
                        <label for="status" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="edit" lay-submit="">增加</button>
                    </div>
                </form>
            </div>
        </div>
        <script>
            layui.use(['form', 'layer','jquery','upload'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;
                upload = layui.upload;

                form.on('checkbox(goods)',function(){
                    $(this).val(2);
                });

                //监听提交
                form.on('submit(edit)', function(data) {
                    $.ajax({
                        type: 'POST',
                        url: '/admin/HousingRes/roomEdit',
                        async: false,
                        dataType: 'json',
                        data: {"data":data.field},
                        success: function (data) {
                            if (data.code==0) {
                                layer.msg(data.msg,{time:2000, icon:6},function(){
                                    // 获得frame索引
                                    var index = parent.layer.getFrameIndex(window.name);
                                    //关闭当前frame
                                    parent.layer.close(index);
                                    //刷新父窗口
                                    xadmin.father_reload();
                                });
                            } else {
                                layer.msg(data.msg,{time: 2000, icon:5});
                            }
                        }
                    });
                    return false;
                });

                //房源户型图 图片上传
                var uploadInst = upload.render({
                    elem:'#photo_url_button' //绑定元素
                    ,url:'/admin/HousingRes/upload' //上传接口
                    ,method:''//上传类型 默认post
                    ,accept:'images' //允许上传的文件类型
                    ,field:'filename'
                    ,data:{type:'photo_url'}
                    ,done:function(res){
                        $imgnum = $('.photo_url_arr').find("img").length
                        $num = $imgnum%6;

                        //上传完毕回调
                        label='';
                        label+='<label class="layui-form-label">';
                        label+='<span class="x-red"></span>';
                        label+='</label>';

                        html = '';
                        if ($num==0 && $imgnum!=0) {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;margin-left:110px;">';
                        } else {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;">';
                        }
                        html+='<img src="/'+res.data.imgUrl+'">';
                        html+='<div class="img_delete">';
                        html+='<a title="查看" onclick="member_del(this)" href="javascript:;">';
                        html+='<i class="layui-icon">&#x1006;</i>';
                        html+='</a></div></div>';


                        if ($num==0 && $imgnum!=0) {
                            $(".photo_url_arr").append(label+html);
                        }else{
                            $(".photo_url_arr").append(html);
                        }

                        home_photo_img = $("#photo_url").val();

                        splits = home_photo_img.length==0 ? "" : ",";

                        home_photo_img+=splits+'/'+res.data.imgUrl;

                        $("#photo_url").val(home_photo_img);
                    }
                    //,size: 50 //最大允许上传的文件大小
                    ,error:function(){
                        alert("失败");
                        //请求异常回调
                    }
                });

            });

            /*图片-删除*/
            function member_del(obj){
                id_param = $(obj).parents(".img").siblings("input").attr('id');
                layer.confirm('确认要删除吗？',function(index){
                    //发异步删除数据
                    img_src = $(obj).parents(".img").find("img").attr("src");
                    home_photo_img = $("#"+id_param).val();
                    img_arr= home_photo_img.split(",");
                    img_arr.splice($.inArray(img_src,img_arr),1);
                    var img_str = '';
                    $.each(img_arr,function(k,v){
                        img_str+=v+",";
                    });
                    img_str = img_str.substring(0,img_str.length-1);
                    $("#"+id_param).val(img_str);
                    $(obj).parents(".img").remove();
                    layer.msg('已删除!',{icon:1,time:1000});
                });
            }


        </script>
    </body>

</html>